<template>
    <div style="height:100%">
        <navbar :title="$t('home_title_3')"></navbar>
        <div class="container">
            <div class="head-bg">
                <img src="./images/todolist-b.png">
                <div class="title colorfff"><label v-html="$t('todo_tips_1', {total: total})"></label></div>
                <div class="list">
                    <van-cell-group>
                        <van-cell center is-link v-for="(item,i) in list" :key="i" :value="item.num" @click="goPage(item.path)">
                            <span slot="title" class="title-box" style="width:80%">
                                <i class="icon iconfont" :class="item.icon"></i>
                                <span class="margin-left5" style="flex:1">{{item.title}}</span>
                            </span>
                        </van-cell>
                    </van-cell-group>
                </div>
            </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
    </div>
</template>
<script>
import { Cell, CellGroup, Image } from 'vant';
export default {
    components: {
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Image.name]: Image
    },
    data() {
        return {
            isLoading: false,
            total: 0
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
            this.isLoading = true;
            this.$axios({
                method: 'GET',
                url: '/app/api/trainee/home/messgae/count',
                params: {
                    isMobile: 1
                }
            }).then(res => {
                if (res.data) {
                    const obj = JSON.parse(JSON.stringify(res.data));
                    if (obj.isHasStaff) {
                        delete obj.isHasStaff;
                    }
                    this.total = Object.values(obj).reduce((a, b) => a + b); // 总数
                    this.list[0].num = res.data.announceCount > 0 ? res.data.announceCount : '--'; // 未读公告个数
                    this.list[1].num = res.data.messageCount > 0 ? res.data.messageCount : '--'; // 用户未读公告个数
                    this.list[2].num = res.data.evaluationCount > 0 ? res.data.evaluationCount : '--'; // 调查问卷列表个数
                    this.list[3].num = res.data.markingCount > 0 ? res.data.markingCount : '--'; // 试卷批改个数
                    this.list[4].num = res.data.inviteCount > 0 ? res.data.inviteCount : '--'; // 待回复的邀请
                    this.list[5].num = res.data.leaveCount > 0 ? res.data.leaveCount : '--'; // 请假审批
                    this.list.push({title: this.$t('personal_apply'), path: '/approval', num: res.data.approvalCount > 0 ? res.data.approvalCount : 0, icon: 'icon-shenpi'});

                    this.isLoading = false;
                }
            });
        },
        goPage(path) {
            if (path == null) {
            } else {
                this.$router.push({path: path});
            }
        }
    },
    computed: {
        list() {
            return [
                {title: this.$t('todo_tips_2'), num: '--', path: '/announce', icon: 'icon-gonggao'},
                {title: this.$t('todo_tips_3'), num: '--', path: '/messageNotification', icon: 'icon-youjian'},
                {title: this.$t('todo_tips_4'), num: '--', path: '/evaluation', icon: 'icon-rili'},
                {title: this.$t('todo_tips_5'), num: '--', path: '/examGrading', icon: 'icon-renwuguanli'},
                {title: this.$t('invitation_replied_to'), num: '--', path: '/invitation', icon: 'icon-invitation'},
                {title: this.$t('leave_approval'), num: '--', path: '/leaveApproval', icon: 'icon-shenpi'}
            ];
        }
    }
};
</script>
<style scoped lang="less">
.header-title-01{
    background: transparent;
}
/deep/.van-nav-bar .van-icon {
    color:#fff;
}
/deep/.van-nav-bar__title {
    color: #fff;
}
.container{
    height: 100%;
    .head-bg{
        position: relative;
        img{
            width: 100%;
        }
        .title{
            position: absolute;
            left: 15%;
            bottom: 40%;
        }
    }
    .list{
        position: absolute;
        width: 100%;
        box-sizing: border-box;
        padding:15px;
        left: 0;
        top: 84%;
        /deep/.van-cell-group{
            border-radius: 5px;
            background-color: transparent;
        }
        /deep/.van-cell{
            margin-bottom: 3%;
            border-radius: 5px;
        }
        /deep/.van-cell::after{
            border-bottom: none;
        }
        /deep/.van-cell__value{
            flex:none;
        }
        .title-box{
            display: flex;
            align-items: center;
        }
        .icon{
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background-color: #EEEEEE;
            font-size: 15px;
            line-height: 35px;
            font-size: 20px;
            text-align: center;
        }
    }
}
</style>
